<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>购物系统-登录页面</title>
    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{css/ms-common.css}" rel="stylesheet">
</head>
<body>
<nav th:replace="common/topbar.html"></nav>
<div th:replace="common/ms-toast.html"></div>

<div class="container mt-3">
    <div class="row">
        <!-- 登录页面左半部分 -->
        <div class="col-md-6" style="background: rgb(196 227 242)">
            <img class="w-100" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01690956f0e7f76ac7257d206fccdd.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661968411&t=34a9ff94c236ae223f102b3064764873">
            <p>测试账号如下(密码: 都为 123456):
                <ul>
                    <li>admin(网站管理员)</li>
                    <li>xiaowang(供应商管理员)</li>
                    <li>xiaoli(销售员)</li>
                    <li>xiaohong(商品管理员)</li>
                    <li>xiaolv(经理)</li>
                </ul>
            </p>
        </div>
        <!-- 登录页面右半部分 -->
        <div class="col-md-5 shadow p-5 mt-2 border-5">
            <h3 class="text-center placeholder">登录</h3>
            <!-- 登录表单-->
            <form id="ms-form-login">
                <ul class="ms-ul list-unstyled">
                    <!-- 1 用户账号 -->
                    <li>
                        <div class="form-floating">
                            <input name="usercode" type="text" class="form-control placeholder" id="ms-form-login-code" placeholder="账号">
                            <label for="ms-form-login-code">账号</label>
                            <div class="valid-feedback">
                                提示: 账号是存在的!
                            </div>
                            <div id="ms-form-login-check-code-fail" class="invalid-feedback">
                                提示: 账号必须存在
                            </div>
                        </div>  </li>
                    <!-- 2 用户密码 -->
                    <li>
                        <div class="form-floating">
                            <input name="password" type="password" class="form-control placeholder" id="ms-form-login-password" placeholder="Password">
                            <label for="ms-form-login-password">密码</label>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-login-check-password-fail" class="invalid-feedback">
                                提示: 密码不能为空
                            </div>
                        </div>
                    </li>


                    <!-- 3 验证码 -->
                    <li>
                        <div class="container-fluid row">
                            <div class="col-md-5">
                                <a href="#" id="ms-captcha-changeImg">
                                    <canvas class="show-captcha" id="ms-captcha-canvas" width="150" height="50"></canvas>
                                </a>
                            </div>
                            <div class="col-md-7">
                                <div class="form-floating">
                                    <input type="text" class="form-control placeholder" id="ms-form-login-captcha" placeholder="Password">
                                    <label for="ms-form-login-captcha">验证码</label>
                                    <div class="valid-feedback">
                                        提示: 验证码正确!
                                    </div>
                                    <div id="ms-form-login-captcha-fail" class="invalid-feedback">
                                        提示: 验证码输入错误
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <!-- 注册按钮 -->
                    <li class="text-center">
                        <label for="autoLogin">三天内自动登录</label>
                        <input id="autoLogin" type="checkbox" class="checkbox" name="remember" value="1">
                    </li>
                    <button id="ms-btn-login" class="ms-keydown_enter btn btn-primary w-100 placeholder" type="button" onclick="ms_login('ms-btn-login')">
                        登录
                    </button>
                </ul>
            </form>
            <a href="/register.html">没有账号？立即注册</a>
        </div>
    </div>
</div>
<!-- 引入第三方 JS 脚本文件 -->
<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.bundle.js}" type="text/javascript"></script>
<!-- 引入自定义的 JS 脚本文件 -->
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-random.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-captcha.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-btn.js}" type="text/javascript"></script>
<script th:src="@{/js/user/ms-login.js}" type="text/javascript"></script>
</body>
<footer>
    <div th:replace="common/footer"></div>
</footer>
</html>